<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
			body{
				background-color: #f5f5f5;
			}
			#app{
				background-color: #fff;
				width: 400px;
				/* border: 1px solid #999; */
				margin: 10px auto;
				padding: 20px;
				box-shadow: 0 0 10px 1px #999;
			}
			label{
				font-size: 20px;
			}
			input{
				height: 35px;
				margin: 10px;
				border: 2px solid #999;
				border-radius: 3px;
				padding: 0 10px;
				outline: none;
				font-size: 16px;
			}
			span{
				color: red;
				font-weight: 600;
			}
			p{
				font-size: 18px;
				line-height: 45px;
				color: #666;
			}
			i{
				color: blue;
			}
	</style>
	<body>
			<div id='app'>
				<h3 align='center'>黄金价格计算器</h3>
				<label>买入单价：</label>
				<input v-model.number="" type="number"> 
				<span>元/克</span> <br>
				<label>卖出单价：</label>
				<input v-model.number="" type="number"> 
				<span>元/克</span> <br>
				<label>手续费率：</label>
				<input v-model.number=""  type="number"> 
				<span>%</span> <br>
				<label>购买数量：</label>
				<input v-model.number=""  type="number"> 
				<span>克</span> <br>
				<hr>
				<p>
					成本价： <i> </i> <br>
					卖出价：<i> </i><br>
					手续费：<i> </i><br>
					赎回获得：<i> </i><br>
					净收入：<i> </i>
				</p>
			</div>
			<script>
				Vue.createApp({
					data(){
						return{
						
						}
					}
				}).mount('#app')
			</script>
	</body>
</html>